<template>
	<view class="collect-container">
		<view v-for="(item,index) in collects" :key="item.id" class="list" @click="toWebPage(item.link)">
			<view class="top-container">
				<view>{{item.author}}</view>
				<view class="date-text">{{item.niceDate}}</view>
			</view>
			<view class="title">{{item.title}}</view>
			<view class="bottom-area">
				<view>{{item.chapterName}}</view>
				<view class="pic" @click.stop="uncolected(index,item.originId)">
					<image src="https://www.wanandroid.com/resources/image/pc/collect_icon_hover.svg"></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "collect-list",
		props: {
			collects: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		},
		methods:{
			uncolected(index,id){
				this.$emit('del',index,id)
			},
			toWebPage(link){
				uni.navigateTo({
					url:"/pages/webPage/webPage?url="+link
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: white;
		font-size: 32rpx;
	}
</style>
<style lang="scss" scoped>
	.collect-container {
		padding: 32rpx;
		background-color: #f6f6f6;

		.list {

			margin-bottom: 16rpx;
			background-color: white;

			.title {
				margin-bottom: 16rpx;
			}

			.bottom-area {
				display: flex;

				.pic {
					margin-left: auto;

					>image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.top-container {
				display: flex;
				margin-bottom: 16rpx;

				.date-text {
					margin-left: auto;
				}
			}
		}
	}
</style>
